<template>
  <div>App</div>
  <p>name:{{ person.name }}</p>
  <p>age:{{ person.age }}</p>
  <p>sex:{{ person.sex }}</p>
  <p>height:{{ person.height }}</p>
  <button @click="changePerson">changePerson</button>
  <Header />
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "App",
});
</script>

<script setup lang="ts">
import { ref } from 'vue';
  import Header from './components/Header.vue';

  interface personType {
    name:string;
    age?:number;
    sex:string;
    height?:number;
    score:{
      ch:number;
      math:number
    };
    girFri:string[]
  }
  const person = ref<personType>({
    name:"xiaowang",
    age:20,
    sex:"nan",
    score:{
      ch:110,
      math:120
    },
    girFri:["lily","lucy"]
  })

  const changePerson = () => {
    // 改
    person.value.name = "zhangsan"
    // 增
    person.value.height = 180;
    // 删
    delete person.value.age;
  }
</script>

<style  scoped lang="scss">
  
</style>